<template>
  <div class="move-dialog" :style="style" v-if="props.visible">
    <slot></slot>
    <div class="move-dialog-close">
      <el-icon @click="emits('update:visible', false)">
        <Close />
      </el-icon>
    </div>
    <div class="move-dialog-bar top" ref="target"></div>
    <div class="move-dialog-bar left" ref="barLeft"></div>
    <div class="move-dialog-bar right" ref="barRight"></div>
    <div class="move-dialog-bar bottom" ref="barBottom"></div>
  </div>
</template>
<script lang="ts" setup>
import { ref, computed } from 'vue';
import { Close } from '@element-plus/icons-vue';
import useMouseMove from '../hooks/useMouseMove';
type PropsType = { option?: object; visible: boolean };
const target = ref<HTMLElement>();
const barLeft = ref<HTMLElement>();
const barRight = ref<HTMLElement>();
const barBottom = ref<HTMLElement>();
const props = defineProps<PropsType>();
const emits = defineEmits(['update:visible']);
const react = ref({
  x: 300,
  y: 100,
  width: 900,
  height: 700,
  ...props.option
});

const style = computed(() => {
  return {
    width: `${react.value.width}px`,
    height: `${react.value.height}px`,
    transform: `translate(${react.value.x}px, ${react.value.y}px)`
  };
});

useMouseMove({
  target,
  cursor: 'move',
  default: () => ({ x: react.value.x, y: react.value.y }),
  updata: ({ x, y }) => {
    const { width, height } = react.value;
    const { innerWidth, innerHeight } = window;
    react.value.x = x > 0 ? (x > innerWidth - width ? innerWidth - width : x) : 0;
    react.value.y = y > 0 ? (y > innerHeight - height ? innerHeight - height : y) : 0;
  }
});
let width, x;
useMouseMove({
  target: barLeft,
  cursor: 'ew-resize',
  default: () => {
    x = react.value.x;
    width = react.value.width;
    return { x: react.value.x, y: 0 };
  },
  updata: p => {
    react.value.width = Math.min(Math.max(width + x - p.x, 600), 1200);
    react.value.x = p.x;
  }
});

useMouseMove({
  target: barRight,
  cursor: 'ew-resize',
  default: () => {
    x = react.value.x;
    width = react.value.width;
    return { x: react.value.width, y: 0 };
  },
  updata: p => {
    react.value.width = Math.min(Math.max(p.x, 600), 1200);
    if (p.x - 1200 > 0) {
      react.value.x = x + p.x - 1200;
    }
    console.log(600 - p.x);
    if (600 - p.x > 0) {
      react.value.x = x + p.x - 600;
    }
  }
});

useMouseMove({
  target: barBottom,
  cursor: 'ns-resize',
  default: () => ({ x: 0, y: react.value.height }),
  updata: ({ y }) => {
    react.value.height = Math.min(Math.max(y, 600), window.innerHeight * 0.9);
  }
});

const init = () => {
  if (!react.value.x && !react.value.y) {
    const { innerWidth, innerHeight } = window;
    react.value.x = (innerWidth - react.value.width) / 2;
    react.value.y = (innerHeight - react.value.height) / 2;
  }
};
defineExpose({ init });
</script>
<style lang="less" scoped>
.move-dialog {
  top: 0;
  left: 0;
  position: fixed;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.2);
  .move-dialog-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

.move-dialog-bar {
  width: 11px;
  height: 11px;
  position: absolute;
  &.top {
    height: 40px;
    width: auto;
    right: 40px;
    top: 0;
    left: 0;
    cursor: move;
  }

  &.bottom {
    left: 0;
    bottom: 0;
    width: 100%;
    cursor: ns-resize;
  }

  &.right {
    top: 30px;
    right: 0;
    height: 100%;
    cursor: ew-resize;
  }

  &.left {
    top: 0;
    left: 0;
    height: 100%;
    cursor: ew-resize;
  }
}
</style>
